@include b(user-config-edit) {
  width: 100%;
  height: 100%;

  @include e(wrapper) {
    display: flex;
    flex-flow: row nowrap;
    place-content: center center;
    align-items: center;
    margin-bottom: 10px;
  }

  @include e(wrapper-title) {
    width: 86px;
    padding-right: 30px;
  }

  @include e(wrapper-input) {
    width: 250px;
    height: 30px;
    padding: 0 3px;
    color: getCssVar(color, text, 2);
    background: transparent;
    border: 1px solid getCssVar(color, border);
    border-radius: 4px;

    &:hover {
      border-color: getCssVar(color, primary);
    }

    &.focus {
      border: 1px solid getCssVar(color, primary);
    }

    &:focus-visible {
      outline: none;
    }
  }

  @include e(wrapper-switch) {
    position: relative;
    display: inline-block;
    width: 250px;
    height: 24px;
    padding: 0 3px;
    pointer-events: none;

    /* 隐藏默认的 checkbox */
    >input {
      width: 0;
      height: 0;
      opacity: 0;
    }

    /* 开关的滑块背景 */
    >.slider {
      position: absolute;
      inset: 0;
      width: 60px;
      pointer-events: auto;
      cursor: pointer;
      background-color: getCssVar(color, primary, disabled);
      border-radius: 30px;
      transition: .4s;
    }

    /* 滑块 */
    >.slider::before {
      position: absolute;
      bottom: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      content: "";
      background-color: white;
      border-radius: 50%;
      transition: .4s;
    }

    /* 当 checkbox 被选中时，改变滑块背景和位置 */
    >input:checked+.slider {
      background-color: getCssVar(color, primary);
      ;
    }

    >input:checked+.slider::before {
      transform: translateX(36px);
    }

    /* 按下效果 */
    /* stylelint-disable-next-line no-descending-specificity */
    >.slider:active {
      background-color: getCssVar(color, primary);
    }
  }
}